<template>
    <div class="component-manage-detail-card">
        <ManageHeader :identity="identity" :info="info" :show-shop="false" bg-color="white"/>
        <div class="btn-box">
            <div class="item">
                <div class="data">
                    <span>推荐订单</span>
                    <span>{{info.order_number}}个</span>
                </div>
                <div class="btn btn-mobile btn-blue btn-rect btn-normal" @click="onClickOrder">查看明细</div>
            </div>
            <div class="item">
                <div class="data">
                    <span>获得奖励金额</span>
                    <span>{{currencyRebate}}元</span>
                </div>
                <div class="btn btn-mobile btn-blue btn-rect btn-normal" @click="onClickRebate">查看明细</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import ManageHeader from '@/features/manage/header.vue';
import {
    api,
} from '@/lib/api';
import {
    currency,
} from '@/lib/utils';
import { ROUTE_NAME } from '@/lib/constant';

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'DetailCard',
    components: {
        ManageHeader,
    },
})
export default class DetailCard extends Vue {
    @Prop({ type: String }) public level: any;
    @Prop({ type: String }) public identity: any;
    @Prop({ type: Object, required: true }) public info: any;
    @Prop({ type: Number, required: true }) public referrerId: any;
    @Prop({ type: String }) public start: any;
    @Prop({ type: String }) public end: any;

    public get currencyRebate() {
        return currency(this.info.rebate);
    }

    public onClickOrder() {
        // api.navigateTo({
        //     url: '/pages/manage_order_list/main',
        //     query: {
        //         referrer_id: this.info.user_id + '',
        //         shop_id: this.info.shop_id + '',
        //         referrer_level: this.level,
        //         start: this.start,
        //         end: this.end,
        //     },
        // });

        api.push({
            name: ROUTE_NAME.MANAGE_ORDER_LIST,
            query: {
                referrer_id: this.info.user_id + '',
                shop_id: this.info.shop.map((item) => item.id).join(','),
                referrer_level: this.level,
                start: this.start,
                end: this.end,
            },
        });
    }

    public onClickRebate() {
        // api.navigateTo({
        //     url: '/pages/manage_rebate_list/main',
        //     query: {
        //         referrer_id: this.info.user_id + '',
        //         shop_id: this.info.shop_id + '',
        //         referrer_level: this.level,
        //         start: this.start,
        //         end: this.end,
        //     },
        // });
        
        api.push({
            name: ROUTE_NAME.MANAGE_REBATE_LIST,
            query: {
                referrer_id: this.info.user_id + '',
                shop_id: this.info.shop.map((item) => item.id).join(','),
                referrer_level: this.level,
                start: this.start,
                end: this.end,
            },
        });
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.component-manage-detail-card {
    margin-bottom: 10px;
    border-radius: 5px;
    .btn-box {
        padding: 0 15px;
        border-top: 1px solid #bbbbbb;
        background-color: #ffffff;
        overflow: hidden;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 9px 0;
            .data {
                display: flex;
                justify-content: space-between;
                width: 200px;
            }
        }
    }
}

</style>
